{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="data-cont-wrap w1200" style="padding: 20px 0;">
        <div class="crumb" style="margin-bottom: 20px;">
            <a href="{% url 'index:index' %}">首页</a>
            <span>></span>
            <a href="{% url 'commodity:commodity' %}">所有商品</a>
            <span>></span>
            <a href="javascript:;">产品详情</a>
        </div>

        <!-- 商品主要展示模块 - 居中布局优化 -->
        <div class="product-intro layui-clear" style="display: flex; justify-content: center; align-items: flex-start; gap: 40px; max-width: 1000px; margin: 0 auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
            <!-- 商品图片区域 -->
            <div class="preview-wrap" style="flex: 0 0 300px; padding: 10px; border: 1px solid #f0f0f0; border-radius: 4px;">
                <a href="javascript:;">
                    <img width="100%" height="auto" src="{{ commoditys.img.url }}" style="object-fit: contain;">
                </a>
            </div>

            <!-- 商品信息与操作区域 -->
            <div class="itemInfo-wrap" style="flex: 1; min-width: 0; padding: 10px 0;">
                <div class="itemInfo">
                    <div class="title" style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px dashed #eee;">
                        <h4 style="font-size: 20px; color: #333; margin: 0 0 10px 0; line-height: 1.5;">{{ commoditys.name }}</h4>
                        <span id="collect" style="display: inline-block; padding: 5px 10px; border: 1px solid #ff4400; color: #ff4400; border-radius: 4px; cursor: pointer; transition: all 0.3s;">
                            <i class="layui-icon"></i> 收藏
                        </span>
                    </div>

                    <div class="summary" style="margin-bottom: 25px;">
                        <p class="reference" style="margin: 0 0 8px 0; color: #999;">
                            <span style="display: inline-block; width: 60px;">参考价</span>
                            <del>￥{{ commoditys.price|floatformat:'2' }}</del>
                        </p>
                        <p class="activity" style="margin: 0; color: #ff4400;">
                            <span style="display: inline-block; width: 60px;">活动价</span>
                            <strong class="price" style="font-size: 24px;">
                                <i>￥</i>{{ commoditys.discount|floatformat:'2' }}
                            </strong>
                        </p>
                        <p class="address-box" style="margin: 15px 0 0 0; color: #666;">
                            <span style="display: inline-block; width: 60px;">送至</span>
                            <strong class="address">浙江&nbsp;&nbsp;杭州&nbsp;&nbsp;上城区</strong>
                        </p>
                    </div>

                    <div class="choose-attrs" style="margin-bottom: 30px;">
                        <div class="color layui-clear" style="margin-bottom: 20px;">
                            <span class="title" style="display: inline-block; width: 60px; vertical-align: top; margin-top: 5px;">规格</span>
                            <div class="color-cont">
                                <span class="btn" style="display: inline-block; padding: 8px 15px; border: 1px solid #ddd; border-radius: 4px; background: #f9f9f9;">{{ commoditys.sezes }}</span>
                            </div>
                        </div>
                        <div class="number layui-clear">
                            <span class="title" style="display: inline-block; width: 60px; vertical-align: top; margin-top: 5px;">数量</span>
                            <div class="number-cont" style="display: inline-flex; align-items: center; border: 1px solid #ddd;">
                                <span class="cut btn" style="width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; background: #f5f5f5; border-right: 1px solid #ddd;">-</span>
                                <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                    onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                    maxlength="4" type="" id="quantity" name="" value="1"
                                    style="width: 50px; height: 30px; line-height: 30px; text-align: center; border: none; outline: none;">
                                <span class="add btn" style="width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; background: #f5f5f5; border-left: 1px solid #ddd;">+</span>
                            </div>
                        </div>
                    </div>

                    <div class="choose-btns">
                        <button class="layui-btn layui-btn-danger car-btn" style="padding: 0 30px; height: 45px; font-size: 16px;">
                            <i class="layui-icon layui-icon-cart-simple"></i>加入购物车
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热销推荐与详情区域 -->
        <div class="layui-clear" style="display: flex; gap: 30px; margin-top: 30px; max-width: 1200px; margin-left: auto; margin-right: auto;">
            <div class="aside" style="flex: 0 0 280px;">
                <h4 style="font-size: 16px; padding: 10px 0; border-bottom: 2px solid #ff4400; margin-bottom: 15px;">热销推荐</h4>
                <div class="item-list">
                    {% for item in items %}
                        <div class="item" style="margin-bottom: 20px; padding: 10px; border: 1px solid #f0f0f0; border-radius: 4px; transition: all 0.3s; cursor: pointer;">
                            <a href="{% url 'commodity:detail' item.id %}" style="display: block;">
                                <img width="100%" height="200px" src="{{ item.img.url }}" style="object-fit: contain; margin-bottom: 10px;">
                            </a>
                            <p style="margin: 0; line-height: 1.5;">
                                <span title="{{ item.name }}" style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px;">
                                    {% if item.name|length > 15 %}
                                        {{ item.name|slice:":15" }}...
                                    {% else %}
                                        {{ item.name|slice:":15" }}
                                    {% endif %}
                                </span>
                                <span class="pric" style="color: #ff4400; font-weight: bold;">￥{{ item.discount|floatformat:'2' }}</span>
                            </p>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="detail" style="flex: 1; padding: 10px; background: #fff; border-radius: 8px;">
                <h4 style="font-size: 16px; padding: 10px 0; border-bottom: 2px solid #ff4400; margin-bottom: 15px;">详情</h4>
                <div class="item">
                    <img width="100%" src="{{ commoditys.details.url }}" style="display: block; margin: 0 auto;">
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block script %}
        layui.config({
            base: "{% static 'js/' %}"
        }).use(['mm', 'jquery'], function () {
            var mm = layui.mm, $ = layui.$;
            var cur = $('.number-cont input').val();

            // 数量增减按钮
            $('.number-cont .btn').on('click', function () {
                if ($(this).hasClass('add')) {
                    cur++;
                } else {
                    if (cur > 1) {
                        cur--;
                    }
                }
                $('.number-cont input').val(cur)
            })

            // 加入购物车按钮
            $('.layui-btn.layui-btn-danger.car-btn').on('click', function(){
                var quantity = $("#quantity").val();
                window.location = "{% url 'shopper:shopcart' %}?id={{ commoditys.id }}&quantity=" + quantity
            });

            // 收藏按钮状态初始化
            {% if likes %}
                $("#collect i").addClass("layui-icon-rate-solid");
            {% else %}
                $("#collect i").addClass("layui-icon-rate");
            {% endif %}

            // 收藏按钮点击事件
            $("#collect").on('click', function (){
                var url = "{% url 'commodity:collect' %}?id={{ commoditys.id }}"
                $.get(url, function (data, status){
                    if (data.result == "收藏成功"){
                        $("#collect i").removeClass("layui-icon-rate").addClass("layui-icon-rate-solid");
                    } else if (data.result == "取消收藏成功"){
                        $("#collect i").removeClass("layui-icon-rate-solid").addClass("layui-icon-rate");
                    }
                    layer.msg(data.result); // 使用layui的msg组件更美观
                });
            });
        });
{% endblock script %}